<template>
	<div class="body">
		<!-- 我的积分 -->
		<!-- <div class="header">
			<div>
				<img @click="returnGo" src="../../assets/homeimg/滑动左.png" />
				<span>我的积分</span>
			</div>
		</div> -->
		<div class="min">
			<div class="min-left" @click="open">积分规则</div>
			<div class="min_top">
				<div class="center">
					<p>{{obj.score}}</p>
					<p>我的积分</p>
				</div>
			</div>
			<div class="min_bottom">
				<!-- <div class="friend box">邀请好友</div> -->
				<div class="box">
					<div class="box_left">
						<span>登录去签到</span>
						<span>完成签到得{{obj.sign}}积分</span>
					</div>
					<span  v-if="obj.status==1" class="allready">已完成</span>
					<span class="wcstatus" @click="toSign(token)" v-else>去完成</span>
					
				</div>
				<div class="box">
					<div class="box_left">
						<span>学习完一小节的内容</span>
						<span>完成学习得{{obj.study}}积分</span>
					</div>
					<span v-if="obj.have_study == 0" class="wcstatus" @click="toCourses">去完成</span>
					<span v-else class="allready">已完成</span>
				</div>
				<div class="box">
					<div class="box_left">
						<span>分享好友送积分</span>
						<span>完成邀请得{{obj.share}}积分</span>
					</div>
					<span v-if="obj.have_share == 0" class="wcstatus" @click="sharewx">去完成</span>
					<span v-else class="allready">已完成</span>
				</div>
			</div>
			<div class="min-foot" @click="toShop(obj.score)">积分商城兑换好物</div>
		</div>
	</div>
</template>
<script>
	import { Dialog, Toast } from "vant";
	import integralApi from "@/api/integral";
	export default {
		data() {
			return {
				obj: {},
				token: '',
				have: false
			};
		},
		components: {
			// [Image.name]: Image
		},
		created() {
			// if (localStorage.getItem("user")) {
			// 	var info = JSON.parse(localStorage.getItem("user"));
			// }
			// this.token = info.token
			window.getStatus = this.getStatus;
			if(this.$route.query.token){
				this.token = this.$route.query.token;
				this.$store.commit('SAVE_TOKEN',this.$route.query.token)
			};
			this.getscore();
		},
		methods: {
			getStatus(status){
				if(status == 1){
					this.obj.score = this.obj.score + 10;
					this.obj.have_share = 1;
				}
			},
			sharewx(){
				window.h5_android && window.h5_android.shareWx();
				window.webkit.messageHandlers.shareToWeixin_js_oc.postMessage([])
			},
			returnGo() {
				// this.$router.go(-1);
				window.webkit.messageHandlers.pageBack_js_oc.postMessage([])
			},
			toShop(id) {
				this.$router.push({
					path: '/shop',
					query: {
						id
					}
				});
			},
			getscore() {
				this.$http.post('/api/score/myScore').then(res => {
					// console.log(res)
					this.obj = res.data;
				})
				// integralApi.myscore({
				// 	token:this.token
				// }).then(res => {
				// 	console.log(res);
				// 	this.obj = res.data;
				// 	localStorage.setItem("scores", JSON.stringify(this.obj.score));

				// });
			},
			// 签到
			toSign(token) {
				// Toast({
				// 	message: token
				// });
				// console.log(this.token)
				this.$http.post('/api/score/sign').then(res => {
					Toast({
						message: res.code
					});
				})
				// integralApi.mysign(token).then(res => {
				// 	// console.log(res);
				// 	Toast({
				// 		message: res.code
				// 	});
				// 	// if (res.code == 1) {
				// 	// 	Toast({
				// 	// 		message: "签到成功+10积分"
				// 	// 	});
				// 	// 	this.obj.score = this.obj.score + this.obj.sign
				// 	// 	this.getscore();
				// 	// }
				// });
			},
			toCourses(){
				this.$router.push({path:'/mycourses',query:{
					token: this.token,
					course_type:'1',
				}})
			},
			//积分规则
			open() {
				Dialog.alert({
					message: this.obj.rule
				}).then(() => {
					// on close
				});
			}
		}
	};
</script>
<style lang="scss" scoped="scoped">
	.body {
		color: #333333;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-size: 100% 100%;
	}

	.header {
		// font-weight: bold;
		width: 100%;
		text-align: center;
		height: 2.75rem;
		line-height: 2.75rem;
		padding-top: 1.25rem;
		position: relative;
		border-bottom: 1px solid #dcdcdc;
		color: #333333;
		font-size: 1.25rem;

		img {
			width: 0.625rem;
			height: 1.125rem;
			position: absolute;
			left: 1rem;
			bottom: 0.75rem;
		}
	}
// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: constant(safe-area-inset-top);

		}

	}

	@supports(bottom:env(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: env(safe-area-inset-top);

		}

	}
	.min {
		flex: 1;
		background: url("../../assets/homeimg/积分背景.png") no-repeat;
		display: flex;
		flex-direction: column;

		.min-left {
			width: 6.625rem;
			height: 2.25rem;
			background: rgba(70, 149, 254, 1);
			border-radius: 0rem 0.9375rem 0.9375rem 0rem;
			font-size: 0.875rem;
			line-height: 2.1875rem;
			text-align: center;
			color: rgba(255, 255, 255, 1);
			margin-top: 45px;
		}

		.min_top {
			width: 100%;
			overflow: hidden;

			// background: #fe914e;
			.center {
				// width: 5.5rem;
				margin: 0 auto;
				text-align: center;

				// margin-top: 4.25rem;
				p {
					color: #fff;
				}

				p:nth-of-type(1) {
					font-size: 2.375rem;
				}

				p:nth-of-type(2) {
					font-size: 1rem;
					height: 2.5rem;
					line-height: 2.5rem;
				}
			}
		}

		.min_bottom {
			// flex: 1;
			width: 92vw;
			margin: 0 auto;
			margin-top: 3.125rem;
			background: #fff;
			border-radius: 1rem;
			padding: 0 1rem;
			box-sizing: border-box;

			.friend {
				font-size: 1.125rem;
				line-height: 3.75rem;
			}

			.box {
				height: 3.75rem;
				border-bottom: 1px solid #e5e5e5;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.box_left {
					span {
						display: block;
					}

					span:nth-of-type(1) {
						font-size: 16px;
						color: #333333;
						// margin-left: 0.3125rem;
					}

					span:nth-of-type(2) {
						font-size: 0.75rem;
						color: #999999;
					}
				}

				.wcstatus {
					width: 4.375rem;
					height: 1.875rem;
					border: 1px solid #d2d2d2;
					text-align: center;
					line-height: 1.875rem;
					border-radius: 0.9375rem;
				}

				.allready {
					width: 4.375rem;
					height: 1.875rem;
					background-color: #FFAF05;
					text-align: center;
					line-height: 1.875rem;
					border-radius: 0.9375rem;
					// color: #fff;
				}
			}
		}

		.min-foot {
			width: 15rem;
			height: 2.75rem;
			margin: 0 auto;
			margin-top: 3.125rem;
			background: linear-gradient(90deg,
				rgba(66, 155, 255, 1) 0%,
				rgba(121, 80, 254, 1) 100%);
			border-radius: 1.25rem;
			font-size: 1.125rem;
			color: rgba(255, 255, 255, 1);
			line-height: 2.75rem;
			text-align: center;
		}
	}
</style>
